<!--
 * @Descripttion: 查看中标结果
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-17 17:21
 * @LastEditors: a12
 * @LastEditTime: 2020-10-17 17:21
-->
<template>
  <div class="page-box">
    <div class="page-box-content">
      <!--  搜索条件  -->
      <el-form ref="queryForm" :model="formInfo" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="询价时间" prop="timeArr">
              <el-date-picker
                  class="order-filter-date"
                  style="width:100%"
                  v-model="formInfo.timeArr"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="projectNo">
              <el-input v-model="formInfo.projectNo" placeholder="项目编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="formInfo.projectName" placeholder="项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col  :span="12">
            <el-form-item style="text-align: right" prop="projectName">
              <el-button type="" @click="resetForm('queryForm')">重置</el-button>
              <el-button type="primary" @click="onQuery()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 列表 -->
      <el-table
          border
          :data="tableData"
          style="width: 100%"
          :max-height="maxHeightNow">
        <el-table-column type="index" width="60" label="序号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="projectNo" label="项目编号" width="140"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="140">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <div class="cell-content">{{scope.row.projectName}}</div>
              <p class="overflow" slot="reference">{{scope.row.projectName}}</p>
            </el-popover>
          </template>
        </el-table-column>
<!--        <el-table-column prop="purchaserName" label="采购方式"></el-table-column>-->
        <el-table-column prop="projectStateName" label="项目状态"></el-table-column>
        <el-table-column prop="auditStatus" label="询价开始时间" min-width="156">
          <template slot-scope="scope">
            <span>{{scope.row.startTime|formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="询价结束时间" min-width="156">
          <template slot-scope="scope">
            <span>{{scope.row.endTime|formeTime}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column prop="certificateStatus" label="代理机构"></el-table-column>-->
        <el-table-column prop="biddingStateName" label="状态"></el-table-column>
        <el-table-column
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="viewDetails(scope.row)">查看明细</el-button>
            <el-button type="primary" size="mini" @click="viewEntrust(scope.row)" >查看委托</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="set-pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {queryDictionaryList} from '@/api/common.api'
  import {queryPageProBiddingList} from '@/api/supplier.api'
  import moment from 'moment'
  export default {
    name: 'view-big',
    components: {},
    data() {
      return {
        formInfo:{
          projectName: '',
          projectNo: '',
          timeArr: []
        },
        stateList:{},
        tableData:[],
        currentPage:1,
        pageSize: 10,
        total: 0
      }
    },
    watch: {},
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    computed: {
      // 表格高度
      maxHeightNow () {
        const height = window.innerHeight
        return height -  290
      }
    },
    created() {
    },
    mounted() {
      // 本人参与询价项目列表查询
      this.queryPageProBiddingListFn()
    },
    methods: {
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.queryPageProBiddingListFn ()
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val
        this.queryPageProBiddingListFn ()
      },
      /**
       * @description 项目报名列表
       * @author 穆宏宇
       * @date 2020-10-13 18:11:45
       * @param
       * @return
       * */
      queryPageProBiddingListFn() {
        const params = {
          current:this.currentPage,
          size:this.pageSize,
          startTime: (this.formInfo.timeArr && this.formInfo.timeArr.length > 0) ? this.formInfo.timeArr[0] : '',
          endTime: (this.formInfo.timeArr && this.formInfo.timeArr.length > 0) ? this.formInfo.timeArr[1] : '',
          projectNo: this.formInfo.projectNo,
          projectName:this.formInfo.projectName
        }
        queryPageProBiddingList(params).then(res=>{
          this.tableData = res.records
          this.total = res.total
        })
      },
      /**
       * @description 查询项目状态
       * @author 穆宏宇
       * @date 2020-10-13 10:19:10
       * @param
       * @return
       * */
      queryProjectStatusListFn () {
        const param = {dictionaryType: 'project_status'}
        queryDictionaryList(param).then(res=>{
          this.stateList = res
        })
      },
      /**
       * @description 重置查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:14
       * @param
       * @return
       * */
      resetForm (formName) {
        console.log('重置')
        this.$refs.queryForm.resetFields()
      },
      /**
       * @description 查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:27
       * @param
       * @return
       * */
      onQuery () {
        this.queryPageProBiddingListFn()
      },
      // 查看明细
      viewDetails (row) {
        this.$router.push({path:'/offer-details',query:{projectId:row.fkProProjectsId}})
      },
      // 查看委托
      viewEntrust (row) {
        this.$router.push({path:'/entrust-details',query:{projectId:row.fkProProjectsId}})
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-box {
    padding: 20px;
    &-content {
      padding: 20px;
      background: white;
      .el-range-editor, .el-select, .el-input {
        width: 80% !important;
      }
      .set-pagination {
        text-align: right;
      }
    }
  }
  .cell-content {
    width: 200px;
    min-height: 20px;
    max-height: 200px;
    overflow-y: auto;
  }
  .overflow {
    width: 118px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
  }
</style>
